<template>
  <div class="search-bar">
    <div class="search-change" :class="[changeActive || '']">
      <a
        class="search-change-item"
        :class="changeActive === item.type ? 'active' : ''"
        href="javascript:;"
        v-for="item in changeList"
        @click="() => { changeActive = item.type }"
        :key="item.type">
        {{ item.text }}
      </a>
      <div class="indicator"></div>
    </div>
    <div class="search-content">
      <input type="text" :placeholder="placeholder[changeActive]" v-model="searchText">
      <select v-model="changeSaleType">
        <option
          v-for="item in changeActive === 'book' ? changeBookList : changeAuctionList"
          :key="item.type" :value="item.type">
          {{ item.text }}
        </option>
      </select>
      <button @click="handleSearch">搜索</button>
    </div>
    <div class="hot-search">
      <a href="javascript:;" class="hot-search-item" v-for="item in hotSearchList" :key="item">{{ item }}</a>
    </div>
  </div>
</template>

<script>
import { getHotSearchList, getSearchData } from '@/api/banner/index'

export default {
  name: 'searchBar',
  data () {
    return {
      changeList: [{
        text: '搜图书',
        type: 'book'
      }, {
        text: '搜拍卖',
        type: 'auction'
      }],
      placeholder: {
        book: '商品名称、作者、出版社、ISBN',
        auction: '拍卖名称、拍卖人、拍主昵称'
      },
      changeBookList: [
        { type: 'sale', text: '在售' },
        { type: 'sold', text: '已售' }
      ],
      changeAuctionList: [
        { type: 'sale', text: '在拍' },
        { type: 'sold', text: '已结束' }
      ],
      hotSearchList: [],
      changeActive: 'book',
      searchText: '',
      changeSaleType: 'sale'
    }
  },
  computed: {
    listQuery () {
      return {
        type: this.changeActive,
        saleType: this.changeSaleType,
        p: this.searchText
      }
    }
  },
  methods: {
    handleSearch () {
      console.log('搜索条件', this.listQuery)
      getSearchData(this.listQuery).then(({ data }) => {
        console.log('返回值', data)
      })
    }
  },
  created () {
    getHotSearchList().then(({ data }) => {
      this.hotSearchList = data.data
    })
  }
}
</script>

<style lang="scss" scoped>
  .search-bar {
    display: flex;
    flex-direction: column;
    .search-change {
      position: relative;
      padding-bottom: 10px;
      .search-change-item + .search-change-item {
        margin-left: 10px;
      }
      .search-change-item {
        color: #000000;
        text-decoration: none;
        font-size: 14px;
        &:hover, &.active {
          color: #8c222c;
        }
      }
      .indicator {
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-bottom: 5px solid #8c222c;
        transition: left .5s;
      }

      &.book {
        .indicator {
          left: 15px;
        }
      }
      &.auction {
        .indicator {
          left: 73px;
        }
      }

    }
    .search-content {
      border: 3px solid #8c222c;
      height: 35px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      background: #FFFFFF;
      input {
        margin: 0;
        padding: 0;
        padding-left: 1em;
        border: none;
        outline: none;
        height: 35px;
        flex: 1;
      }
      select {
        margin: 0;
        padding: 0;
        display: block;
        border: none;
        border-left: 1px solid #AFAFAF;
        outline: none;
        height: 35px;
        line-height: 35px;
        width: 100px;
        text-align: center;
        option {
          height: 25px;
        }
      }
      button {
        height: 35px;
        width: 100px;
        border: 0;
        margin: 0;
        outline: none;
        cursor: pointer;
        color: #FFFFFF;
        background: #8c222c;
        &:hover {
          background: #7B111B;
        }
      }
    }
    .hot-search {
      margin-top: 5px;
      .hot-search-item {
        color: #6F6F6F;
        font-size: 12px;
        margin-right: 10px;
        text-decoration: none;
        &:hover {
          color: #7B111B;
        }
      }
    }
  }
</style>
